.category-stat {
	display: flex;
	height: 30rem;
	padding: 1.5rem;

	.left {
		display: flex;
		flex-direction: column;
		width: 33rem;
	}

	.right {
		display: flex;
		flex: 1 0 0;
		flex-direction: column;
		min-width: 40rem;

		.table-wapper {
			display: flex;
			flex: 1 0 0;
			align-items: center;

			.table-container {
				width: 100%;
				border: 1px solid var(--color-border-2);
				border-top: none;
				border-right: none;

				.table {
					width: 100%;
					border-spacing: 0;

					th {
						font-weight: normal;
						text-align: left;
						background-color: var(--color-bg-2);
					}

					td,
					th {
						height: 2.25rem;
						padding: 0 1.25rem;
						border-top: 1px solid var(--color-border-2);
						border-right: 1px solid var(--color-border-2);
					}

					.name {
						width: 13.75rem;
						overflow: hidden;
						font-size: 0.75rem;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.count {
						display: flex;
						align-items: center;

						.value {
							width: 6rem;
							text-align: right;
						}
					}
				}
			}
		}
	}

	.empty {
		width: 16.5rem;
		height: 16.5rem;

		.empty-content {
			color: var(--color-text-1);
			text-align: center;

			.num {
				margin-top: 0.5rem;
				font-size: var(--text-xl);
			}
		}
	}

	.chart {
		display: flex;
		flex: 1 0 0;
		align-items: center;
		justify-content: center;
	}

	.empty-data {
		border-right: 1px solid var(--color-border-2);
	}
}
